<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <title>证书详细</title>
  </head>
  <body>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        padding-top: 20px;
        background-color: #f2f3f8;
      }
      .img-box {
        display: flex;
        height: 400px;
        /* background: linear-gradient(#f2f3f8, #e5e6e9 ); */
        justify-content: center;
        align-items: center;
        transform-style: preserve-3d;
        perspective: 600px;
      }

      .img {
        /* width: 300px; */
        height: 360px;
        object-fit: contain;
        animation:  rot 10s linear infinite;
      }

      .card-detail {
        padding: 30px;
        background-color: #fff;
      }

      .card-title {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 20px;
      }

      .card-detail {
      }

      .card-text {
        display: flex;
        font-size: 16px;
        margin-bottom: 15px;
        color: #666;
      }

      .label {
        margin-right: 60px;
      }

      .auth-id {
        text-align: center;
        color: #666;
        margin-top: 40px;
        font-size: 16px;
      }
      @keyframes rot {
        0% {
          transform: rotateY(0deg);
        }
        20% {
          transform: rotateY(360deg);
        }
        100% {
          transform: rotateY(360deg);
        }
      }
    </style>
    <script src="./vue.global.js"></script>
    <script src="./data.js"></script>
    <script>
      function parseQueryStringManual(queryString) {
        // 去除查询字符串开头的"?"
        const paramsStr = queryString.substring(1);
        const paramsArray = paramsStr.split("&");
        const params = {};

        for (let i = 0; i < paramsArray.length; i++) {
          const [key, value] = paramsArray[i].split("=");
          // 解码URL组件
          params[decodeURIComponent(key)] = decodeURIComponent(value || "");
        }

        return params;
      }

      let param = parseQueryStringManual(location.search);

      console.log("------param:", param);
    </script>
    <div id="app">
      <!-- 图片 -->
      <div class="img-box">
        <img class="img" :src="state.url" />
      </div>
      <!-- 详情 -->
      <div class="card-detail">
        <div class="card-title">{{ state.title }}</div>
        <div class="card-text" v-for="item in state.info">
          <div class="label">{{ item.label }}</div>
          <div class="value">{{ item.value }}</div>
        </div>
      </div>
      <!-- 公众号 -->
      <div class="auth-id">{{ state.authId }}</div>
    </div>

    <script>
      const { createApp, reactive } = Vue;
      let current = list.find((v) => v.code == param.code);
      if (!current) {
        current = list[0];
      }

      createApp({
        setup() {
          const state = reactive(current);

          return {
            state,
          };
        },
      }).mount("#app");
    </script>
  </body>
</html>
